<%# app/views/admin/shared/_fee_details_selection.html.erb %>
<%# 参数: work_order, reimbursement %>

<div class="panel">
  <h3>选择关联的费用明细</h3>
  <% if work_order.persisted? %>
    <%# 编辑模式：显示只读列表 %>
    <table class="index_table">
      <thead>
        <tr>
          <th>ID</th>
          <th>费用类型</th>
          <th>原始金额</th>
          <th>费用日期</th>
          <th>单据名称</th>
          <th>产品</th>
          <th>验证状态</th>
          <th>最新关联工单</th>
          <th>问题类型</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <% work_order.fee_details.each do |fee_detail| %>
          <tr>
            <td><%= link_to fee_detail.id, admin_fee_detail_path(fee_detail) %></td>
            <td><%= fee_detail.fee_type %></td>
            <td><%= number_to_currency(fee_detail.amount, unit: "¥") %></td>
            <td><%= fee_detail.fee_date %></td>
            <td><%= fee_detail.reimbursement&.document_name %></td>
            <td><%= fee_detail.product %></td>
            <td>
              <% arbre_context = Arbre::Context.new %>
              <%= arbre_context.status_tag(fee_detail.verification_status, class: case fee_detail.verification_status
                                                                             when FeeDetail::VERIFICATION_STATUS_VERIFIED
                                                                               'ok' # green
                                                                             when FeeDetail::VERIFICATION_STATUS_PROBLEMATIC
                                                                               'error' # red
                                                                             else
                                                                               'warning' # orange
                                                                             end).to_s %>
            </td>
            <td>
              <% latest_wo = fee_detail.latest_associated_work_order %>
              <% if latest_wo %>
                <%= link_to "##{latest_wo.id}", [:admin, latest_wo] %>
              <% else %>
                N/A
              <% end %>
            </td>
            <td>
              <% latest_wo = fee_detail.latest_associated_work_order %>
              <% if latest_wo && latest_wo.problem_types.any? %>
                <% problem_details = latest_wo.problem_types.map do |problem_type| %>
                  <% "#{problem_type.code}-#{problem_type.title}-#{problem_type.sop_description}+#{problem_type.standard_handling}" %>
                <% end.join("\n") %>
                
                <%= content_tag(:pre, problem_details,
                  class: "problem-type-plain-text",
                  style: "white-space: pre-wrap; margin: 0; font-family: monospace; font-size: 12px;") %>
              <% else %>
                无
              <% end %>
            </td>
            <td><%= fee_detail.notes %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  <% else %>
    <%# 新建模式：显示复选框 %>
    <div class="fee-details-selection">
      <table class="index_table fee-details-table">
        <thead>
          <tr>
            <th class="checkbox-column"></th>
            <th>ID</th>
            <th>费用类型</th>
            <th>原始金额</th>
            <th>费用日期</th>
            <th>单据名称</th>
            <th>产品</th>
            <th>验证状态</th>
            <th>最新关联工单</th>
            <th>问题类型</th>
          </tr>
        </thead>
        <tbody>
          <% reimbursement.fee_details.each do |fee_detail| %>
            <tr class="fee-detail-row">
              <td class="checkbox-column">
                <%
                  # For new work orders, determine the type from the controller name
                  if work_order.type.present?
                    param_name = work_order.type.underscore.gsub('/', '_')
                    Rails.logger.debug "Fee details selection: Using work_order.type for param_name: #{param_name}"
                  else
                    # Extract from current path, e.g., /admin/audit_work_orders/new -> audit_work_order
                    controller_path = request.path.split('/')[2]
                    param_name = controller_path.present? ? controller_path.singularize : 'work_order'
                    Rails.logger.debug "Fee details selection: Using controller_path for param_name: #{param_name}, path: #{request.path}, controller_path: #{controller_path}"
                  end
                  
                  # Force param_name to match the actual controller for communication work orders
                  if request.path.include?('communication_work_orders')
                    param_name = 'communication_work_order'
                    Rails.logger.debug "Fee details selection: Forcing param_name to communication_work_order"
                  end
                %>
                <%= check_box_tag "#{param_name}[submitted_fee_detail_ids][]",
                                fee_detail.id,
                                work_order.submitted_fee_detail_ids&.include?(fee_detail.id.to_s),
                                id: "fee_detail_#{fee_detail.id}",
                                class: "fee-detail-checkbox",
                                data: { fee_type: fee_detail.fee_type } %>
              </td>
              <td><%= link_to fee_detail.id, admin_fee_detail_path(fee_detail) %></td>
              <td><%= fee_detail.fee_type %></td>
              <td><%= number_to_currency(fee_detail.amount, unit: "¥") %></td>
              <td><%= fee_detail.fee_date %></td>
              <td><%= fee_detail.reimbursement&.document_name %></td>
              <td><%= fee_detail.product %></td>
              <td>
                <% arbre_context = Arbre::Context.new %>
                <%= arbre_context.status_tag(fee_detail.verification_status, class: case fee_detail.verification_status
                                                                                when FeeDetail::VERIFICATION_STATUS_VERIFIED
                                                                                  'ok' # green
                                                                                when FeeDetail::VERIFICATION_STATUS_PROBLEMATIC
                                                                                  'error' # red
                                                                                else
                                                                                  'warning' # orange
                                                                                end).to_s %>
              </td>
              <td>
                <% latest_wo = fee_detail.latest_associated_work_order %>
                <% if latest_wo %>
                  <%= link_to "##{latest_wo.id}", [:admin, latest_wo] %>
                <% else %>
                  N/A
                <% end %>
              </td>
              <td>
                <% latest_wo = fee_detail.latest_associated_work_order %>
                <% if latest_wo && latest_wo.problem_types.any? %>
                  <% problem_details = latest_wo.problem_types.map(&:legacy_problem_code).join("\n") %>
                  
                  <%= content_tag(:pre, problem_details,
                    class: "problem-type-plain-text",
                    style: "white-space: pre-wrap; margin: 0; font-family: monospace; font-size: 12px;") %>
                <% else %>
                  无
                <% end %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
    
    <%# 费用类型分组标签 - 默认隐藏 %>
    <div class="fee-type-tags" id="fee-type-tags" style="display:none;">
      <h4>已选费用类型</h4>
      <div class="fee-type-tags-container"></div>
    </div>
    
    <%# 问题类型选择区域 - 默认隐藏 %>
    <div class="problem-types-container" id="problem-types-container" style="display:none;">
      <h4>选择问题类型（当处理意见为"无法通过"时，需选择问题类型或填写审核意见）</h4>
      <div class="problem-types-wrapper"></div>
    </div>
    
    <%# 验证错误显示区域 %>
    <div id="validation-errors" class="validation-error" style="display:none;"></div>
  <% end %>
</div>

<style>
.fee-details-selection {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #ddd;
  margin: 10px 0;
}

.fee-details-table {
  width: 100%;
  border-collapse: collapse;
}

.fee-details-table th,
.fee-details-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

.fee-details-table th {
  background-color: #f5f5f5;
  position: sticky;
  top: 0;
  z-index: 10;
}

.fee-details-table tbody tr:hover {
  background-color: #f9f9f9;
}

.checkbox-column {
  width: 30px;
  text-align: center;
}

.fee-detail-row td {
  vertical-align: middle;
}

.fee-detail-row input[type="checkbox"] {
  cursor: pointer;
}
}

.fee-detail-status {
  min-width: 80px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  margin-right: 5px;
}

/* 费用类型标签样式 */
.fee-type-tags {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.fee-type-tags h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.fee-type-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fee-type-tag {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  display: inline-block;
}

/* 问题类型复选框样式 */
.problem-types-container {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.problem-types-container h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.problem-types-wrapper {
  margin-top: 10px;
  max-height: 300px;
  overflow-y: scroll;
}

.problem-type-section {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.problem-type-section h5 {
  margin-top: 10px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}

.problem-type-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.problem-type-checkbox {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 5px;
}

.problem-type-checkbox input {
  margin-right: 5px;
}

.problem-type-checkbox label {
  font-size: 13px;
  cursor: pointer;
}

/* 未找到费用类型警告样式 */
.missing-fee-types-warning {
  margin: 15px 0;
  padding: 15px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  color: #856404;
}

.missing-fee-types-warning .warning-text {
  font-weight: bold;
  margin-bottom: 10px;
}

.missing-fee-types-warning .button {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #5cb85c;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.missing-fee-types-warning .button:hover {
  background-color: #4cae4c;
}

/* 验证错误样式 */
.validation-error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
}

.highlight-error {
  border: 2px solid #dc3545 !important;
  animation: pulse-error 1s;
}

@keyframes pulse-error {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
</style>

<!-- 这里不再包含内联JavaScript，使用外部work_order_form.js文件 -->